import React, { useState } from 'react';
import RGL, { WidthProvider } from '@/components/Draggler';
import _ from 'lodash';
import DragDom from '@/components/DragDom';
import { getTempDetail } from '@/api/index';
import { message } from 'antd';

const mouseEnter = e => {
  console.log('鼠标进入', e);
};

const mouseLeave = e => {
  console.log('鼠标移出', e);
};

const generateDOM = (formInfo, setFormInfo, pageNo) => {
  return _.map(formInfo, (l, i) => {
    const nl = JSON.parse(l.cfiLayout);
    return (
      <div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} key={nl.i} style={{ overflow: 'hidden', display: parseInt(l.pageNo) === pageNo ? 'block' : 'none' }} data-grid={nl}>
        <DragDom key={nl.i} index={nl.i} data={l} isCs={false} isHome={false} formInfo={formInfo} setFormInfo={setFormInfo} />
      </div>
    );
  });
};


const ReactGridLayout = WidthProvider(RGL);

export default ({ curIndex, pageNo, setpageNo, formInfo, setFormInfo, tempData }) => {
  // onDragEnter={() => setDo(true)} fix bug: 拖入一个item还没放置的时候触发onLayoutChange导致页面白板
  const [doing, setDo] = useState(false);
  const [maxcur, setmaxcur] = useState(false);

  function fetchCurPageData(curIndex, page) {
    getTempDetail(curIndex).then(res => {
      if (res.code === '0') {
        console.log('res', res);
        res.data.list.forEach(e => {
          e.cfiConfigId = e.cfiId;
        });
        setFormInfo(_.clone(res.data.list));
      } else {
        message.error(res.msg);
      }
    });
  }

  function onLayoutChange(l) {
    if (doing) return;
    const f = _.map(_.clone(formInfo), v => {
      const item = l.find(lv => lv.i === JSON.parse(v.cfiLayout).i);
      v.cfiLayout = JSON.stringify(item);
      return v;
    });
    setFormInfo(f);

    if (JSON.stringify(formInfo) !== '[]'){
      setmaxcur(true);
    }
  }
  const onDrop = e => {
    const { datasourceId, layout, name, type, id, odbcValue, updateHz, pageNo } = tempData;
    const { w, h } = JSON.parse(layout);
    const { x, y } = e;
    const i = '' + new Date().getTime();
    const cfiLayout = JSON.stringify({ x, y, w, h, i });
    const newInfo = [{ cfiLayout, cfiDatasourceId: datasourceId, cfiName: name, cfiType: type, cfiConfigId: id, cdsOdbcValue: odbcValue, cfiUpdateHz: updateHz, pageNo: pageNo }, ...formInfo];
    setFormInfo(newInfo);
    setDo(false);
  };

  return (
    // onDragEnter={() => setDo(true)} fix bug: 拖入一个item还没放置的时候触发onLayoutChange导致页面白板
    <>
      <div className="grid-box" onDragEnter={() => setDo(true)}>
        <ReactGridLayout
          className="cst-layout"
          cols={12}
          rowHeight={30}
          onLayoutChange={onLayoutChange}
          onDrop={onDrop}
          isDroppable={curIndex.length > 0}
        >
          { generateDOM(formInfo, setFormInfo, pageNo) }
        </ReactGridLayout>
      </div>
    <div className="pagenoBox" >
      <img src={require('../../assets/images/temp/pageChange.png')} alt="" style={{ cursor: pageNo > 1 ? 'pointer' : 'not-allowed' }} onClick={ e => {
        if (pageNo > 1){
          const page = pageNo - 1;
          setpageNo(page);
          fetchCurPageData(curIndex, page);
        }
      }} />
      <span>第{pageNo}页</span>
      <img src={require('../../assets/images/temp/pageChange.png')} className="nextPage" style={{ cursor: maxcur === true ? 'pointer' : 'not-allowed' }} onClick={ e => {
        const maxConst = [];
        formInfo.forEach(element => {
          maxConst.push(element.pageNo);
        });
        const maxConst1 = Math.max(...maxConst);
        if (maxConst1 >= pageNo){
          const page = pageNo + 1;
          setpageNo(page);
          setmaxcur(true);
          fetchCurPageData(curIndex, page);
        } else {
          setmaxcur(false);
        }
      }} alt="" />
    </div>
    </>
  );
};
